import React from 'react';
import { Tooltip, Legend, CartesianGrid, BarChart, Bar, XAxis, YAxis } from 'recharts';
import { for_obj, d_sort_num, pad, get_time, loc_minute, is_empty } from 'sui';
import { get_fix } from './ctl';

const ShiftChart = ({ data }) => {
    if (is_empty(data)) {
        return null;
    }

    const fix_data = get_fix();

    let series = [];
    let key = [];

    let val = [];
    data.forEach(d => {
        let s = loc_minute(new Date(`2022-02-01 ${d.start}`));
        let e = loc_minute(new Date(`2022-02-01 ${d.end}`));
        val.push({s: s, e: e, sn: d.sn});
    });

    if (is_empty(val)) {
        return null;
    }

    d_sort_num(val, "s");

    let offset = 0;
    let value = {};
    val.forEach((d, i) => {
        let ks = "s" + i;
        let ke = "e" + i;

        value[ks] = d.s - offset;
        offset = d.e;
        value[ke] = d.e - d.s;

        key.push({key: ks, type: "rest", sn: d.sn});
        key.push({key: ke, type: "work", sn: d.sn});
    });

    series.push(value);

    const tickDay = (d) => {
        const r = get_time(d * 60);
        if (!r) {
            return "00:00"
        }
        return `${pad(r[0])}::${pad(r[1])}`;
    };

    const fill_color = (d) => {
        if (d.type === "work" && fix_data[d.sn]) {
            return fix_data[d.sn].cl;
        }

        return "#A0AEC0";
    };

    const day = key.map((d, i) => <Bar
        key={"bar" + i}
        isAnimationActive={false}
        dataKey={d.key}
        stackId="a"
        fill={fill_color(d)}
        barSize={20}/>);

    const Tip = (props) => {
        const { active, external } = props;

        if (active && external) {
            const style = {
                padding: 9,
                backgroundColor: '#fff',
                border: '1px solid #ccc',
            };

            const ret = external.map((d, i) => {
                const shift = (d) => {
                    if (d.sn === "day") {
                        return fix_data["day"].des;
                    }
                    else if (d.sn === "night") {
                        return fix_data["night"].des;
                    }

                    return "";
                };

                const range = (d) => {
                    const s = tickDay(d.s);
                    const e = tickDay(d.e);

                    return `${s} - ${e}`;
                };

                return (
                    <div key={d.sn + i} className="table-row">
                        <div className={"text-right table-cell"}>{shift(d)}</div>
                        <div className={"table-cell pl-3"}>{range(d)}</div>
                    </div>
                );
            });

            return (
                <div className="table" style={style}>
                    {ret}
                </div>
            );
        }

        return null;
    };

    const leg = [];
    for_obj(fix_data, (k, v) => leg.push({value: v.des, color: v.cl}));

    return (
        <BarChart
            layout="vertical"
            width={1000}
            height={100}
            data={series}
            margin={{ top: 10, right: 40, bottom: 10, left: 20 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis type="number" domain={[0, 23 * 60 + 59]} tickFormatter={(d) => tickDay(d)}/>
            <YAxis dataKey="sn" type="category"/>
            <Tooltip content={<Tip external={val}/>} />
            <Legend payload={leg}/>
            {day}
        </BarChart>
    );
};

export {ShiftChart};
